<template>
  <div>
    <h1>App:{{ count }}</h1>
    <h1>App:{{ person }}</h1>

    <hr />
    <h1>{{ name }}</h1>
    <button @click="nameX = 'li xiaosi'">修改fullName2</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>


<script  setup lang="ts">
import { ref, computed } from "vue";
const count = ref("xi");
const person = ref("yu");

const name = computed(() => {
  return count.value + " " + person.value;
});
const nameX = computed({
  get() {
    return count.value + " " + person.value;
  },
  set(value) {
    const [first, last] = value.split(" ");
    count.value = first;
    person.value = last;
  },
});
</script>


<style  scoped >
</style> 